<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Greet</title>
<style type="text/css">
#container {
 padding: 2px;
 font-family: Arial Unicode MS,Arial,sans-serif;
 font-size: small;
}
#container > div {
 padding: 2px 0;
}
</style>
<script type="text/javascript" src="json2.js"></script>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
//<!--
$(function(){

  function sendRequest(username) {
    var newGreet = {
      "status": 0,
      "name": username
    };
    jQuery.ajax({
      type: "POST",
      url: "hello/",
      contentType: "application/json",
      data: JSON.stringify(newGreet),
      dataType: "json",
      success: function(greet){
        $("<div/>").html("Greet #" + greet.id + ": " + greet.message + " | " + greet.status).appendTo("#container");
      },
      error: function(xhr, errStatus, errMessage) {
        alert("Couldn't retrieve JSON");
      }
    });
  }

  $("#username").keypress(function(e){
    if(e.which==13)
      sendRequest($(this).val());
  });
  
  $("#send").click(function(e){
    sendRequest($("#username").val());
  });
});
//-->
</script>
</head>
<body>
  <div id="container">
    <div><input id="username" name="username" type="text"/><button id="send" name="Send">Send</button></div>
  </div>
</body>
</html>
